<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM和DOM</title>
    <link rel="stylesheet" href="BOMAndDOM.css">

</head>
<body>
    <div id="time">2022/08/23</div>

    <code class="code01">
        var timer = document.getElementById('time');<br>
        console.log(timer);<br>
        console.log(typeof(timer));<br>
        console.dir(timer);<br>
    </code>
    
    <p class="pat">注意:
        <ol>
            <li>由于页面从上往下加载,script文件要写在标签下面才能让标签具备script中的行为</li>
            <li>id是对大小写敏感的,所以要注意不要写错它名字</li>
            <li>返回值是一个元素对象</li>
            <li>console.dir打印返回的元素对象,能查看对象的属性和方法</li>
        </ol>
    </p>

    <p class="pat">京东密码输入框</p>

    <div class="box01">
        <label for=""></label>
        <img src="images/lock.png" alt="" id="lock01">
        <input type="password" name="" id="pwd">
    </div>

    <div class="pat">点击盒子，变色，注意驼峰命名法</div>
    <div id="box02"></div>

    <div class="pat">图片的显示和隐藏 display的block和none</div>
    <div class="box03">
        <img src="images/QRcode.png" alt="">
        <div class="box03-text">狗狗脚印广告位</div> 
        <i class="close-btn">x</i>
    </div>

    <div class="pat">精灵图 for循环 简便</div>
    <div class="box04 clearfix">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li> 
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <!-- 输入框焦点 -->
    <div class="pat">输入框 焦点 onfocus onblur 文字变色</div>
    <input type="text" value="手机" name="" id="input01">

    <div class="pat">密码提示：这里注意到，如果不在√图标后加字，就不会显示√图标，原因是背景图片不撑开盒子。如果不加字，盒子就是扁的</div>

    <!-- 密码位数 -->
    <div class="register">
        <input type="password" class="ipt" name="" id="">
        <p class="message">请输入6~16位密码</p>
    </div>

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <div class="pat">百度换肤案例，点击缩略图，将背景图片换成缩略图</div>

    <ul class="baidu">
        <li><img src="./images/desktop_1.jpg" alt=""></li>
        <li><img src="images/desktop_2.jpg" alt=""></li>
        <li><img src="images/desktop_3.jpg" alt=""></li>
        <li><img src="images/desktop_4.jpg" alt=""></li>
    </ul>

    <div class="pat">表格 鼠标停留变色 高亮</div>

    <table>
        <thead>
            <tr>
                <th class="allCheck">
                <input type="checkbox" name="" id="j_cbAll"> <span class="all">全选</span>
                </th>
                <th>商品</th>
                <th>商家</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
            <td>
                <input type="checkbox" name="check">
            </td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
            </tr>
            <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥4999</td>
            </tr>
            <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米电视</td>
            <td>小米</td>
            <td>￥5999</td>
            </tr>
        </tbody>
    </table>
 
    <div class="pat">
        获取属性的两种方法
        <ol>
            <li>获取内置属性（比如id）：element.属性</li>
            <li>获取自定义属性（比如瞎编的属性index-data）：element.getAttribute('属性')</li>
            自定义属性规范写法是以data-为开头<br>
            h5新增的获取自定义属性的方法：
            element.dataset.属性
            element.dataset[属性] 或者 
        </ol>
    </div>

    <div class="pat">
        更改属性的两种方法
        <ol>
            <li>更改内置属性（比如id）：element.属性 = '值'</li>
            <li>更改自定义属性（比如瞎编的属性index-data）：element.setAttribute('属性','值')。但其实也可以用来改内置属性，比如div.setAttribute('class','footer')</li>
        </ol>
    </div>

    <div class="pat">移除属性的方法：element.removeAttribute('属性')</div>
    <!-- 案例：tab -->
    <div class="tab">
        <div class="tab-list">
            <ul>
                <li class="current" >商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab-con">
            <div class="item">
                商品介绍模块的内容
            </div>
            <div class="item">
                规格与包装模块的内容
            </div>
            <div class="item">
                售后保障模块的内容
            </div>
            <div class="item">
                商品评价模块的内容
            </div>
            <div class="item">
                手机社区模块的内容
            </div>
        </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <div class="pat">节点法 可以更简洁地获取元素</div>

    <div class="pat">
        <ul>
            <li>创建节点例子：var li= document.creatElement('li')</li>
<li>添加节点（在父级元素的子级元素后面追加）例子：var ul = document.querySelector('.ul01');</li>
            <li>添加节点（在指定的子级元素前面插入）例子：在ul的第0个儿子前面插入lili是这样的：ul.insertBefore(lili,ul.children[0]);</li>
        </ul>
    </div>

    <ul class="ul01">
        <li>123</li>
    </ul>

    <div class="pat">发布评论功能</div>
    <div class="pat">-增加功能-删除留言：removeChild <br>
        不让链接跳转，可以这样写href，而不是写井号
        href='javascript:;'</div>

    <textarea class="text02" name="" id="" cols="30" rows="10"></textarea>
    <button class="btn02">发布</button>
    <ul class="ul02"></ul>

    <div class="pat">删除元素：removeChild</div>
    <button class="btn03">删除</button>
    <ul class="ul03">
        <li>第零个</li>
        <li>第一个</li>
        <li>第二个</li>
    </ul>

    <div class="pat">
        克隆节点cloneNode() <br>
        括号中为空或为false，浅拷贝，复制节点本身，不复制里面的子节点（也就是只复制标签，不复制内容）
        括号中为true，深拷贝，复制节点本身和里面所有的子节点（就是复制标签和内容）
    </div>
    <ul class="ul04">
        <li>节点1</li>
        <li>节点2</li>
        <li>节点3</li>
    </ul>

    <div class="pat">动态添加和删除表格的元素</div>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody class="tbody02"></tbody>
    </table>

<div class="pat">
    三种创建元素方式的区别：
    <ol>
        <li>document.write 在页面文档流加载完毕后调用它，会导致页面重绘（就是重新加载一个新的页面，除了这句啥都没了）</li>
        <li>在创建大量元素时，innerHTML的拼接字符串法效率低，拼接数组法效率和creatElement差不多高（用push和join）</li>
        <li>在创建大量元素时，creatElement效率高</li>
    </ol>
</div>

<!-- 注册事件的新方法：监听 -->
<div class="pat">注册事件的方法：传统注册方式（只能绑定一个）、监听（一个可添加多个监听器）</div>
<button class="btn04">方法监听注册事件</button>

<!-- 解绑事件 -->
<div class="pat">
    解绑事件 删除事件<br>
    解开传统onclick方式绑的：啥啥.onclick=null;<br>
    解开监听绑的：removeEventListener(type, listener[,useCapture]);
</div>
<button class="btn05">绑监听和解绑</button>

<div class="pat">事件捕获是由外到内的 参数三是true 弹窗是先father后son</div>
<div class="father01">
    <div class="son01"></div>
</div>

<div class="pat">事件冒泡是由内到外的 参数三是false 或者 不写 弹窗是先son后father</div>
<div class="father02">
    <div class="son02"></div>
</div>

<div class="pat">无冒泡的特殊事件：onblur onfocus onmouseenter onmouseleave</div>

<div class="pat">事件对象</div>
<div class="box04">123</div>




    <script src="BOMAndDOM.js" defer></script>
</body>
</html>